{% extends '../_manage.html' %}

{% block title %} {{ _('All Topics') }} {% endblock %}

{% block head %}
<script>
    $(function () {
        getJSON('/api/boards', function (err, resp) {
            if (err) {
                return showError(err);
            }
            var boards = resp.results.reduce((obj, b) => {
            	obj[b.id] = b;
            	return obj;
            }, {});
            getJSON('/api/topics', {
                page: parseInt('{{ page }}')
            }, function (err, resp) {
                if (err) {
                    return showError(err);
                }
                var
                	page = resp.page,
                	topics = resp.results;
                topics.map(t => {
                	t.board = boards[t.boardId];
                });

                initVM({
                	topics: topics,
                	page: page
                });
            });
        });
    });

    function initVM(data) {
        var vm = new Vue({
            el: '#vm',
            data: {
                topics: data.topics,
                page: data.page
            },
            created: function () {
                $('#loading').hide();
                $('#vm').show();
            },
            methods: {
                lockTopic: function (t) {
                    UIkit.modal.alert('unsupported yet.');
                },
                deleteTopic: function (t) {
                    var that = this;
                    UIkit.modal.confirm('Topic \"' + t.name + '\" will be deleted. Continue?', function () {
                        that.$resource('/api/topics/' + t.id + '/delete').save({}).then(function (resp) {
                            resp.json().then(function (result) {
                                refresh();
                            });
                        }, onJsonError);
                    });
                },
                deleteTopicAndLock: function (t) {
                    var that = this;
                    UIkit.modal.confirm('Topic \"' + t.name + '\" will be deleted, and user \"' + t.userName + '\" will be locked. Continue?', function () {
                    	that.$resource('/api/users/' + t.userId + '/lock/5000000000000').save({}).then(function (resp) {
                    		resp.json().then(function (result) {
		                        that.$resource('/api/topics/' + t.id + '/delete').save({}).then(function (resp) {
        		                    resp.json().then(function (result) {
                		                refresh();
                        		    });
                        		}, onJsonError);
                        	});
                        }, onJsonError);
                    });
                }
            }
        });
    }
</script>
{% endblock %}

{% block main %}

<div id="error" class="uk-width-1-1">
</div>

<div id="loading" class="uk-width-1-1">
    <i class="uk-icon-spinner uk-icon-spin"></i> {{ _('Loading') }}...
</div>

<div id="vm" class="uk-width-1-1">
    <ul class="uk-tab" data-uk-tab>
        <li><a href="#0" onclick="location.assign('/manage/board/')">{{ _('Boards') }}</a></li>
        <li class="uk-active"><a href="#0">{{ _('Topics') }}</a></li>
        <li><a href="#0" onclick="location.assign('/manage/board/reply')">{{ _('Replies') }}</a></li>
    </ul>
    <div class="uk-margin">
        <a href="javascript:refresh()" class="uk-button"><i class="uk-icon-refresh"></i> {{ _('Refresh') }}</a>
    </div>

    <table class="uk-table uk-table-hover">
        <thead>
            <tr>
                <th width="10%">{{ _('Image') }}</th>
                <th width="10%">{{ _('User') }}</th>
                <th width="50%">{{ _('Name') }}</th>
                <th width="15%">{{ _('Created') }}</th>
                <th width="15%">{{ _('Action') }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="t in topics">
                <td>
                    <img v-bind:src="t.userImageUrl" class="uk-comment-avatar uk-border-circle x-avatar"
                        style="width:50px;height:50px;">
                </td>
                <td>
                    <a v-bind:href="'/user/' + t.userId" v-text="t.userName"></a>
                </td>
                <td>
                    <p>
                        <a v-text="t.name" v-bind:href="'/discuss/' + t.board.id + '/' + t.id" target="_blank"></a>
                        <span v-if="t.refId > 0">[<a v-bind:href="'/ref/' + t.refType + '/' + t.refId" target="_blank">问题来源</a>]</span>
                        <i class="icon-tag"></i> <span v-text="t.tags"></span>
                    </p>
                    <div v-html="t.content"></div>
                </td>
                <td>
                    <span v-text="t.createdAt.toDateTime()"></span>
                </td>
                <td>
                    <a v-on:click="lockTopic(t)" title="Lock topic" href="#0" class="x-btn"><i class="uk-icon-lock"></i></a>
                    <a v-on:click="deleteTopic(t)" title="Delete topic" href="#0" class="x-btn"><i class="uk-icon-trash"></i></a>
                    <a v-on:click="deleteTopicAndLock(t)" title="Delete topic and lock user" href="#0" class="x-btn"><i class="uk-icon-ban"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

    <div v-if="page.total===0" class="x-empty-list">
        <p>No topic found.</p>
    </div>

    <div is="pagination" v-bind:page="page"></div>
</div>

{% endblock%}